<template>
    <div class="BugBox">
        <p>欢迎使用,有Bug进行反馈</p>
        <div class="BugPhoto">
            <div class="one">
                <div class="a1">
                    <img src="../../assets/img/earth-1756274_1280.webp" alt="">
                </div>
                <div class="a2">
                    <img src="../../assets/img/forest-3622519_1280.jpg" alt="">
                </div>
                <div class="a3">
                    <img src="../../assets/img/ocean-3605547_1280.jpg" alt="">
                </div>
            </div>
            <div class="two">
                <div class="b1">
                    <img src="../../assets/img/forest-3622519_1280.jpg" alt="">
                    
                </div>
                <div class="b2">
                    <img src="../../assets/img/earth-1756274_1280.webp" alt="">
                    
                </div>
                <div class="b3">
                    <img src="../../assets/img/ocean-3605547_1280.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="btn">
            <a-button>反馈中心</a-button>
        </div>
        
    </div>
</template>

<script setup>

</script>

<style scoped>
.btn {
    display: flex;
    justify-content: center;
}
.css-dev-only-do-not-override-1hsjdkk {
    width: 250px;
    height: 50px;
color: rgb(56, 148, 255);
border: 1px solid  rgb(56, 148, 255);

}

.BugPhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.BugPhoto {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    height: 320px;
    padding: 0 60px;
    margin-bottom: 40px;
    /* margin: 0 40px; */
}
.BugPhoto .one,
          .two {
    display: flex;
    width: 100%;
    height: 150px;
}
.BugBox > p {
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 50px;
    letter-spacing: .2em;
}
.BugBox {
    padding: 30px 0 0;
    height: 500px;
    background-color: rgb(246 246 246);
    margin: 100px 20px;
}
.one,
.two {
    gap: 10px;
}
.two {
    flex-direction: row-reverse;
}
.one > .a1 {
    flex: 5;
    background-color: red;
}
.one > .a2 {
    flex: 4;
    background-color: blue;
}
.one > .a3  {
    flex: 3;
    background-color: green;
}

.two > .b1 {
    flex: 5;
    background-color: red;
}
.two > .b2 {
    flex: 4;
    background-color: blue;
}
.two > .b3  {
    flex: 3;
    background-color: green;
}

</style>